<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>房源地图信息</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }

        #btn-wrap{margin:100px auto;text-align:center;}
        form{
            margin:30px;
        }


        /*定位*/
        .map-location{
            width: 28px;
            height: 30px;
            position: absolute;
            top: 8px;
            right: 0px;
            z-index: 5;
            font-size: 18px;
            cursor: pointer;
        }
        .map-location-input{
            padding-right: 30px;
        }
    </style>
</head>
<body>

<form class="layui-form" style="margin-top: 0px;margin-left: 0px">

    <div class="layui-inline" >
        <div class="layui-input-inline">
            <input type="text" id="value" style="width: 330px" name="name" lay-verify="required" placeholder="请输入小区名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
</form>

<table style="margin-top: -30px" id="roomTable" lay-filter="roomTable"></table>

<!-- 编辑页面开始 -->
<form class="layui-form" id="amendRoomForm" lay-filter="amendRoomForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">房源经度</label>
        <div class="layui-input-block">
            <input type="text" id="longitude" name="longitude" placeholder="请输入房源经度" lay-verify="required" class="layui-input">
            <div id="locationBtn" class="layui-icon layui-icon-location map-location"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源纬度</label>
        <div class="layui-input-block">
            <input type="text" id="latitude"  name="latitude" placeholder="请输入房源纬度" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">小区名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入小区名称" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">浮层内容</label>
        <div class="layui-input-block">
            <textarea name="tips" placeholder="请输入浮层展示内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit  lay-filter="amendRoomSubmit">确认修改</button>
            <button type="button"  id="closeAmendRoom" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 编辑页面结束 -->



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    //配置插件目录
    layui.config({
        base : 'layui/layui_exts/'
    }).extend({
        locationX: 'location/locationX',
        location: 'location/location',
    }).use(['table','form','layer','location'], function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var location = layui.location;

        // 自己维护初始化标注, 这里是 郑州航院
        var locationData = {lng:113.793729,lat:34.794567};

        table.render({
            elem:'#roomTable'
            ,url:'house-room-map/list'
            ,page:true
            ,limit:10
            ,limits:[6,8,10,20]
            ,cols:[[
                {field:'roomId',title:'编号',sort:true,width:80,align:'center'}
                ,{field:'roomName',title:'房源名称',align:'center'}
                ,{field:'longitude',title:'房源经度',align:'center'}
                ,{field:'latitude',title:'房源纬度',align:'center'}
                ,{field:'name',title:'小区名称',align:'center'}
                ,{field:'tips',title:'浮层展示内容',align:'center'}
                ,{toolbar: '#barDemo', align:'center'}
            ]]
        });
        /**
         * 监听roomTable的查看编辑删除按钮的单击事件
         * */
        table.on('tool(roomTable)',function (obj) {
            var data = obj.data;
            //编辑按钮的单击事件
            if(obj.event=='edit'){
                form.val("amendRoomForm",data);
                layer.open({
                    type:1,
                    title:['编辑房源地图信息','font-size:18px;color:orange;'],
                    area:['760px','80%'],
                    content:$("#amendRoomForm"),
                });
            }
        });

        /**
         * 监听修改页面的确认修改按钮
         * */
        form.on("submit(amendRoomSubmit)",function (obj) {
            layer.confirm("你确定要修改房源地图信息吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'house-room-map/update',
                    data:obj.field,
                    type:"put",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("roomTable");
                            layer.msg("修改房源地图信息成功！",{icon:'1',title:'提示',closeBtn :'1'});
                        }
                    }
                });
            })
            return false;
        });
        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeAmendRoom").click(function () {
            layer.closeAll();
        })
        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            if($("#value").val()==""){
                table.reload("roomTable",{
                    url:'house-room-map/list',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("roomTable",{
                    url:'house-room-map/search',
                    where:{
                        name:$("#value").val()
                    }
                });
            }
        });


        location.render("#locationBtn",{
            type:1,
            apiType: "baiduMap",
            coordinate: "baiduMap",
            mapType: 2,
            zoom: 15,
            title: '区域定位',
            init: function(){
                return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
            },
            success: function (data) {
                $("#longitude").val(data.lng);
                $("#latitude").val(data.lat);
            }
        });

    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

</body>
</html>